<template>
  <div class="audio-bobo">
    <audio
      @timeupdate="updateTime"
      ref="audio"
      src="http://o6wndwjxn.qnssl.com/diyijieyinpin1.mp3"
    ></audio>
    <!-- <div id="aplayer"  style></div> -->
    <div class="audio-progress" v-if="palayStatus">
      <div>{{format(currentTime)}}</div>
          <div
      class="progress-bar"
      ref="progressBar"
    >
      <div class="bar-inner">
        <div
          class="progress"
          ref="progress"
        ></div>
        <div
          class="progress-btn-wrapper"
          ref="progressBtn"
          @touchstart.prevent="progressTouchStart"
          @touchmove.prevent="progressTouchMove"
          @touchend.prevent="progressTouchEnd"
        >
          <div class="progress-btn"></div>
        </div>
      </div>
    </div>
      <div>{{format(duration)}}</div>
    </div>
  </div>
</template>

<script>
// import APlayer from 'APlayer'
// import 'APlayer/dist/APlayer.min.css'
export default {
  props: ['palayStatus'],
  data () {
    return {
      currentTime: '', // 播放时间
      duration: '', // 总时间,
      Proportion: ''
    }
  },
  watch: {
    // 监听播放
    palayStatus () {
      if (this.palayStatus === true) {
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    },
    // 监听播放时间
    currentTime (newcurrentTime) {
      if (this.duration && this.touch.initiated === false) {
        this.Proportion = newcurrentTime / this.duration
        this.$nextTick(() => {
          // this.$refs.progressBtn.clientWidth
          const barWidth = this.$refs.progressBar.clientWidth - 15
          const offsetWidth = this.Proportion * barWidth
          this._offset(offsetWidth)
          if (newcurrentTime === this.duration) {
            this.$emit('palayerStatus', false)
          }
        })
      }
    }
  },
  methods: {
    // 播放暂停
    audioPlayer () {
      this.palayStatus = !this.palayStatus
    },
    // 获取当前播放时间
    updateTime (e) {
      this.currentTime = e.target.currentTime
    },
    // 变整数
    format (interval) {
      interval = interval | 0
      const minute = interval / 60 | 0
      const second = this._pad(interval % 60)
      return `${minute} : ${second}`
    },
    // 加0
    _pad (num, n = 2) {
      let len = num.toString().length
      while (len < n) {
        num = '0' + num
        len++
      }
      return num
    },
    // 设置便宜
    _offset (offsetWidth) {
      this.$refs.progress.style.width = `${offsetWidth}px`
      this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px,0,0)`
    },
    progressTouchStart (e) {
      this.touch.initiated = true
      this.touch.startX = e.touches[0].pageX // 记录起始点
      this.touch.left = this.$refs.progress.clientWidth // 获取当前进度条偏移值
    },
    progressTouchMove (e) {
      if (!this.touch.initiated) {
        return false
      }
      const deltaX = e.touches[0].pageX - this.touch.startX
      const offsetWidth = Math.min(this.$refs.progressBar.clientWidth, Math.max(0, this.touch.left + deltaX))
      this._offset(offsetWidth)
    },
    progressTouchEnd (e) {
      this.touch.initiated = false
      this._triggerPercent()
    },
    _triggerPercent () {
      const barWidth = this.$refs.progressBar.clientWidth - this.$refs.progressBtn.clientWidth
      const percent = this.$refs.progress.clientWidth / barWidth
      this.Proportion = percent
      this.$refs.audio.currentTime = this.$refs.audio.duration * percent
      if (this.palayStatus === false) {
        this.$refs.audio.play()
        this.$emit('palayerStatus', true)
      }
    }
  },
  created () {
    this.touch = {}
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {
        this.duration = this.$refs.audio.duration
      }, 200)
    })
    // this.audio = new APlayer({
    //   container: document.getElementById('aplayer'),
    //   autoplay: true,
    //   loop: 'one',
    //   listFolded: true,
    //   audio: {
    //     name: '123',
    //     artist: '321',
    //     url: 'http://o6wndwjxn.qnssl.com/diyijieyinpin1.mp3',
    //     cover: 'http://o6wndwjxn.qnssl.com/ybt4528943204.jpg'
    //   }
    // })
  },
  components: {

  }
}
</script>

<style lang="less">
.progress-bar {
  width: 80%;
  height: 30px;
  margin: 0 auto;
}
.bar-inner {
  position: relative;
  top: 13px;
  height: 4px;
  background: rgba(0, 0, 0, 0.3);
}
.progress {
  position: absolute;
  height: 100%;
  background: #fcc;
}
.progress-btn-wrapper {
  position: absolute;
  left: -8px;
  top: -13px;
  width: 30px;
  height: 30px;
}

.progress-btn {
  position: relative;
  top: 7px;
  left: 7px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 3px solid #ccc;
  border-radius: 50%;
  background: #fcc;
}
.audio-progress{
  width: 80%;
  display: flex;
  margin:  0 auto;
}
.audio-progress>div:first-of-type{
  flex: 0 0 50px;
  line-height: 30px;
  text-align: center
}
.audio-progress>div:last-of-type{
  flex: 0 0 50px;
  line-height: 30px;
  text-align: center
}
.audio-progress>div:nth-of-type(2){
  flex:  1
}
.audio-bobo{
  width: 100%;
}
</style>
